<template>
  <el-container>

<!--    查询条件页面-->
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="formInline.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formInline.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formInline.role" placeholder="角色">
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryUserPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveUser">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

    </el-header>
<!--    主页面-->
    <el-main>
<!--      用户信息table页面-->
      <el-table
          ref="singleTable"
          :data="userData"
          highlight-current-row
          style="width: 100%">
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            property="username"
            label="用户名"
            width="120">
        </el-table-column>
        <el-table-column
            property="account"
            label="账号"
            width="120">
        </el-table-column>
        <el-table-column
            property="role"
            label="角色"
            :formatter="typeFormatter">
        </el-table-column>
        <el-table-column
            property="imageUrl"
            label="头像">
          <template slot-scope="scope">
            <div class="demo-image">
              <el-image
                  style="width: 35px; height: 35px"
                  :src="scope.row.imageUrl"
                  fit="fit"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
                style="margin-left: 5px"
                title="确定删除？"
                icon="el-icon-info"
                icon-color="red"
                confirmButtonText='确定'
                cancelButtonText="取消"
                @confirm="confirmDelete(scope.$index, scope.row)"
            >
            <el-button
                slot="reference"
                size="mini"
                type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--      分页插件-->
      <div class="block" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.formInline.pageNumber
            :page-sizes="[10, 20, 50, 100]"
            :page-size=this.formInline.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.pageTotal>
        </el-pagination>
      </div>
<!--      新增用户弹窗-->
      <el-dialog title="新增用户" :visible.sync="dialogFormVisibleSave">
        <el-form :model="saveUserInfo" label-width="80px">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserInfo.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input placeholder="请输入账号" v-model="saveUserInfo.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="saveUserInfo.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-input placeholder="请输入头像" v-model="saveUserInfo.imageUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="saveUserInfo.role" placeholder="角色">
              <el-option label="普通用户" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
            </el-select>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelSave">取 消</el-button>
          <el-button type="primary" @click="saveUserInfoClick">确 定</el-button>
        </div>
      </el-dialog>
      <!--      编辑用户弹窗-->
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisibleEdit">
        <el-form :model="editUserInfo" label-width="80px">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="editUserInfo.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input placeholder="请输入账号" v-model="editUserInfo.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="editUserInfo.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-input placeholder="请输入头像" v-model="editUserInfo.imageUrl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="editUserInfo.role" placeholder="角色">
              <el-option label="普通用户" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="editUserInfoClick">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>

  </el-container>



</template>

<script>
export default {
  name: "PerEmp",
  data() {
    return {
      formInline: {
        username: '',
        role: '',
        account:'',
        pageNumber: 1,
        pageSize:10
      },
      pageTotal: null,
      userData: [],
      saveUserInfo:{
        username:'',
        account:'',
        password:'',
        imageUrl:'',
        role:''
      },
      editUserInfo:{
        id:'',
        username:'',
        account:'',
        password:'',
        imageUrl:'',
        role:''
      },
      dialogFormVisibleSave: false,
      dialogFormVisibleEdit: false,
    }
  },
  methods: {
    // 查询全部
    queryUserPage() {
      console.log('queryUserPage!');
      this.postRequest('/user/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.userData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          }
          else {
            console.log("查询错误")
          }
        }else {
          console.log("查询错误")
        }
      })
    },
    //新增用户按钮
    saveUser(){
      console.log('saveUser!')
      this.dialogFormVisibleSave = true
      this.resetSave()
    },
    //取消新增用户
    cancelSave(){
      this.dialogFormVisibleSave = false
      this.resetSave()
    },
    //编辑用户按钮
    handleEdit(index, row) {
      console.log(row.id);
      this.getRequest('/user/getUserById/' + row.id).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.dialogFormVisibleEdit = true;
            this.editUserInfo.id = resp.data.id;
            this.editUserInfo.username = resp.data.username;
            this.editUserInfo.account = resp.data.account;
            this.editUserInfo.password = null;
            this.editUserInfo.imageUrl = resp.data.imageUrl;
            this.editUserInfo.role = resp.data.role;
          }
          else {
            console.log("编辑错误")
          }
        }else {
          console.log("编辑错误")
        }
      })
    },
    //取消编辑用户信息
    cancelEdit(){
      this.dialogFormVisibleEdit = false
      this.resetEdit()
    },
    //确定编辑用户
    editUserInfoClick(){
      this.postRequest('/user/update', this.editUserInfo).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.dialogFormVisibleEdit = false;
            this.resetEdit();
            this.queryUserPage();
          }
          else {
            console.log("编辑错误")
          }
        }else {
          console.log("编辑错误")
        }
      })
    },
    //删除用户
    confirmDelete(index, row) {
      console.log(row.id);
      this.deleteRequest('/user/delete/' + row.id).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            console.log("删除成功")
            this.queryUserPage();
          }
          else {
            console.log("新增错误")
          }
        }else {
          console.log("查询错误")
        }
      })
    },
    //切换页面数据条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.postRequest('/user/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.userData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          }
          else {
            console.log("查询错误")
          }
        }else {
          console.log("查询错误")
        }
      })
    },
    //切换当前页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formInline.pageNumber = val;
      this.postRequest('/user/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.userData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          }
          else {
            console.log("查询错误")
          }
        }else {
          console.log("查询错误")
        }
      })
    },

    // 保存用户信息
    saveUserInfoClick(){
      this.postRequest('/user/save', this.saveUserInfo).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            this.dialogFormVisibleSave = false;
            this.queryUserPage();
          }
          else {
            console.log("新增错误")
          }
        }else {
          console.log("查询错误")
        }
      })
    },

    //重置按钮
    resetQuery(){
      this.formInline.username = ''
      this.formInline.role = ''
      this.formInline.account = ''
      this.formInline.pageNumber = 1
      this.formInline.pageSize = 10
      this.queryUserPage()
    },
    //清空新增弹窗信息
    resetSave(){
      this.saveUserInfo.username = ''
      this.saveUserInfo.account = ''
      this.saveUserInfo.password = ''
      this.saveUserInfo.imageUrl = ''
      this.saveUserInfo.role = ''
    },
    //重置编辑弹窗信息
    resetEdit(){
      this.editUserInfo.id = ''
      this.editUserInfo.username = ''
      this.editUserInfo.account = ''
      this.editUserInfo.password = ''
      this.editUserInfo.imageUrl = ''
      this.editUserInfo.role = ''
    },
    //状态码映射为角色
    typeFormatter(row){
      switch (row.role) {
        case '1':
          return "普通用户";
        case '2':
          return "管理员";
      }
    }
  },
  created() {
    this.queryUserPage()
  }
}
</script>

<style scoped>
.el-container{
  border: none;
}

.el-header{
  padding: 5px 5px 5px 5px;
}
.el-main {
  color: #333;
}
.block{
  float: right;
  margin-top: 20px;
}
</style>